<template>
  <div class="container">
    <div class="com-echarts" ref="hot_ref"></div>
    <span class="iconfont arr-left" @click="toLeft">&#xe6ef;</span>
    <span class="iconfont arr-right" @click="toRight">&#xe6ed;</span>
    <span class="cat-name"> 女装</span>
  </div>
</template>

<script>
import "@/../public/static/font/iconfont.css";
export default {
  data() {
    return {
      initecharts: null,
      allData: [],
      currentIndex: 0, //当前所展示的一级分类的数据
      data: null, //进入三级分类的数据
    };
  },
  methods: {
    Initecharts() {
      this.initecharts = this.$echarts.init(this.$refs.hot_ref);
      const option = {
        legend: {
          left: "center",
          top: "2%",
          // right:,
          // itemGap: ,
          icon: "circle",
          textStyle: {
            fontSize: "1rem",
            color:'white'
          },
        },
        tooltip: {},
        series: [
          {
            type: "pie",
          },
        ],
      };
      this.initecharts.setOption(option);
    },
    async getDate() {
      const { data: res } = await this.$http.get("/hotProduct");
      this.allData = res;
      this.updatecharts();
    },
    updatecharts() {
      const legendData = [];
      this.allData[this.currentIndex].children.forEach((item) => {
        legendData.push(item.name);
      });
      // console.log(legendData);
      const seriesArr = [];
      this.allData[this.currentIndex].children.forEach((item) => {
        seriesArr.push({
          value: item.value,
          name: item.name,
          labelLine: {
            show: false,
          },
          label: {
            show: false,
          },
        });
      });
      const dataOption = {
        legend: {
          data: legendData,
        },
        series: [
          {
            data: seriesArr,
          },
        ],
      };
      this.initecharts.setOption(dataOption);
      this.initecharts.on("click", (e) => {
        //点击图标会进入到图标的内部内容
        // console.log(e);
        this.data = this.allData[this.currentIndex].children;

        const erjifenleiOption = {};
        this.initecharts.setOption(erjifenleiOption);
      });
    },
    screenAdapte() {
      const adapteOption = {};
      this.initecharts.setOption(adapteOption);
      this.initecharts.resize();
    },
    // 点击转换
    toLeft() {
      this.currentIndex--;
      console.log(this.currentIndex);
      if (this.currentIndex < 0) {
        this.currentIndex = this.allData.length - 1;
      }
      this.updatecharts();
    },
    toRight() {
      this.currentIndex++;
      console.log(this.currentIndex);
      if (this.currentIndex > this.allData.length - 1) {
        this.currentIndex = 0;
      }
      this.updatecharts();
    },
  },
  computed: {
    catName() {
      return this.allData[this.currentIndex].name;
    },
  },
  created() {
    this.getDate();
  },
  mounted() {
    this.Initecharts();
    window.addEventListener("resize", this.screenAdapte);
    this.screenAdapte();
  },
  destroyed() {},
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  .com-echarts {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .arr-left {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    scale: 2;
  }
  .arr-right {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    scale: 2;
  }
  .cat-name {
    position: absolute;
    bottom: 5%;
    right: 10%;
  }
}
</style>